import React, { useEffect, useState } from 'react'
import {ShopWrapper} from './style'
import zuojian from '../../assets/images/zuojian.png'
import GouCart from '../GouCart'
import nocart from '../../assets/images/nocart.png'
import {Link} from 'react-router-dom'
export default function ShopCart() {
    const [shopList,setShopList]=useState([])
    useEffect(()=>{
        let shoplist= JSON.parse(localStorage.getItem('list')) ;
        setShopList(shoplist)
    })
  return (
    <ShopWrapper>
        <div className='shop-header'>
            <span>
                <Link to='/shop'>
  <img src={zuojian} alt="" />
                </Link>
              
            </span>
            <div className='shop-title'>
                <p>购物车</p>
            </div>
            <div className='shop-admin'>
                <p>管理</p>
            </div>
        </div>
        {
           shopList==null || shopList.length==0?<img src={nocart} alt="" />
           : shopList.map((item,index)=>(
               <GouCart item={item} key={index}/>
            ))
        }
    </ShopWrapper>
  )
}
